<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
		<title>箱博士登录</title>
		<link rel="icon" href="favicon.ico" type="image/ico">
		<meta name="author" content="yinqi">
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="css/materialdesignicons.min.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="layui/layui/css/layui.css">
		<script type="text/javascript" src="layui/layui/layui.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
		<style>
			.wrapper {
				position: relative;
			}

			.login {
				display: flex !important;
				min-height: 100vh;
				align-items: center !important;
				justify-content: center !important;
			}

			.login-center {
				background: #fff;
				min-width: 38.25rem;
				padding: 2.14286em 3.57143em;
				border-radius: 5px;
				margin: 2.85714em 0;
			}

			.login-header {
				margin-bottom: 1.5rem !important;
			}

			.login-center .has-feedback.feedback-left .form-control {
				padding-left: 38px;
				padding-right: 12px;
			}

			.login-center .has-feedback.feedback-left .form-control-feedback {
				left: 0;
				right: auto;
				width: 38px;
				height: 38px;
				line-height: 38px;
				z-index: 4;
				color: #dcdcdc;
			}

			.login-center .has-feedback.feedback-left.row .form-control-feedback {
				left: 15px;
			}

			body {
				width: 100%;
				height: 100%;
				background: url(images/back.jpg);
				/* 背景图垂直、水平均居中 */
				background-position: center center;
				/* 背景图不平铺 */
				background-repeat: no-repeat;
				/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
				background-attachment: fixed;
				/* 让背景图基于容器大小伸缩 */
				background-size: cover;
				/* 设置背景颜色，背景图加载过程中会显示背景色 */
				background-color: #464646;
			}
		</style>
	</head>

	<body data-logobg="color_8" data-sidebarbg="color_8">

		<div class="row wrapper">
			<div class="login">

				<div class="login-center">
					<div class="login-header text-center">
						<a href="index.html"> <img style="width: 200px" alt="light year admin" src="images/logo.png">
						</a>
					</div>
					<div class="card-body">

						<ul class="nav nav-tabs nav-justified">
							<li class="active">
								<a id="loginbtn" data-toggle="tab" href="#loginpage">登录</a>
							</li>
							<li class="nav-item">
								<a id="registerbtn" data-toggle="tab" href="#registerpage">注册新用户</a>
							</li>
						</ul>
						<div class="tab-content">
							<div class="tab-pane fade active in" id="loginpage">
								<form action="#!" method="post" onsubmit="return false">
									<div class="form-group has-feedback feedback-left">
										<input required="required" type="text" placeholder="用户名" class="form-control"
											name="username" id="username" />
										<span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
									</div>
									<div class="form-group has-feedback feedback-left">
										<input required="required" type="password" placeholder="密码" class="form-control"
											id="password" name="password" />
										<span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
									</div>
									<div class="form-group has-feedback feedback-left row">
										<div class="col-xs-7">
											<input id="yzm" type="text" name="captcha" class="form-control"
												placeholder="验证码">
											<span class="mdi mdi-check-all form-control-feedback"
												aria-hidden="true"></span>
										</div>
										<div class="col-xs-5">
											<canvas id="yzmc" onclick="dj()"
												style="border-radius: 30px;background-color: #ffffff;border: 2px solid #ebebeb;width: 100px;height: 42px;"></canvas>
										</div>
									</div>
									<div class="form-group has-feedback feedback-left">
										<label class="checkbox checkbox-primary m-t-10">
											<input id="rememberme" type="checkbox"><span>记住我（3天）</span>
										</label>
									</div>

									<div class="form-group">
										<button class="btn btn-block btn-primary" onclick="getData()">立即登录</button>
									</div>
								</form>
							</div>
							<div class="tab-pane fade" id="registerpage">
								<form action="#!" method="post" onsubmit="return false">
									<div class="form-group has-feedback feedback-left">
										<input required="required" type="text" placeholder="用户名" class="form-control"
											name="username_register" id="username_register" />
										<span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
									</div>
									<div class="form-group has-feedback feedback-left">
										<input required="required" type="password" placeholder="密码" class="form-control"
											id="password_register" name="password_register" />
										<span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
									</div>
									<div class="form-group has-feedback feedback-left">
										<input required="required" type="text" placeholder="电话号码" class="form-control"
											name="phone_register" id="phone_register" />
										<span class="mdi mdi-cellphone form-control-feedback" aria-hidden="true"></span>
									</div>
									<div class="form-group has-feedback">
										<select disabled="disabled" required="required" class="form-control"
											id="companykindid" name="companykindid" size="1">
											<option value="一般权限">一般权限</option>
										</select>
									</div>
									<div class="form-group">
										<button class="btn btn-block btn-primary" onclick="registerData()">立即注册</button>
									</div>
								</form>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script src="js/ServerUrl.js"></script>
		<script type="text/javascript">
			$(function() {
				// 	console.log(storage.getItem("username"));
				// console.log(Cookies.get('islogin'));
				if (Cookies.get('islogin') == "true" && Cookies.get('expires') == "3") {
					$("#username").attr("value", Cookies.get('username'));
					$("#password").attr("value", Cookies.get('password'));
					$("#rememberme").prop("checked", "true");;
					// console.log(Cookies.get('username'));
					// console.log(Cookies.get('phone'));
					// console.log(Cookies.get('password'));
					// console.log(Cookies.get('identity'));
				}
			});

			function registerData() {
				var username_register = $("#username_register").val();
				var password_register = $("#password_register").val();
				var phone_register = $("#phone_register").val();
				$.ajax({
					//几个参数需要注意一下
					type: "post", //方法类型
					dataType: "json", //预期服务器返回的数据类型
					url: serverUrl + "/goregister",
					data: {
						"username": username_register,
						"password": password_register,
						"phone": phone_register
					},
					success: function(result) {
						// console.log(result);
						if (result.status == 200) {
							layer.msg('注册成功，立即登录');
							document.getElementById("loginbtn").click();
							$("#username").attr("value", username_register);
							$("#password").attr("value", password_register);
						} else if (result.status == 404) {
							layer.msg('注册失败');
						}
					},
					error: function() {
						layer.msg('注册异常');
					}
				});
			}
			var show_num = [];
			draw(show_num);

			function dj() {
				draw(show_num);
			}

			function getData() {
				var val = document.getElementById("yzm").value.toLowerCase();
				var username = document.getElementById("username").value;
				var password = document.getElementById("password").value;
				var num = show_num.join("").toLowerCase();

				if (username == "" || password == "") {
					return;
				} else {
					if (val == '') {
						layer.msg('请输入验证码');
					} else if (val == num) {
						var username = $("#username").val();
						var password = $("#password").val();
						$.ajax({
							//几个参数需要注意一下
							type: "post", //方法类型
							dataType: "json", //预期服务器返回的数据类型
							url: serverUrl + "/gologin",
							data: {
								"username": username,
								"password": password
							},
							success: function(result) {
								// console.log(result);
								if (result.id != -1) {
									// storage.setItem("identity", result.identity);
									// storage.clear();
									if (($("#rememberme").prop("checked") == true)) {
										Cookies.set('islogin', "true", {
											expires: 3
										});
										Cookies.set('expires', '3', {
											expires: 3
										});
										Cookies.set('id', result.id, {
											expires: 3
										});
										Cookies.set('username', result.username, {
											expires: 3
										});
										Cookies.set('password', result.password, {
											expires: 3
										});
										Cookies.set('phone', result.phone, {
											expires: 3
										});
										Cookies.set('identity', result.identity, {
											expires: 3
										});
										Cookies.set('latesttime', result.latesttime, {
											expires: 3
										});
										Cookies.set('status', result.status, {
											expires: 3
										});
									} else {
										Cookies.set('islogin', 'true');
										Cookies.set('expires', 'temp');
										Cookies.set('id', result.id);
										Cookies.set('username', result.username);
										Cookies.set('password', result.password);
										Cookies.set('phone', result.phone);
										Cookies.set('identity', result.identity);
										Cookies.set('latesttime', result.latesttime);
										Cookies.set('status', result.status);
									}
									window.location.href = 'index.html';
									layer.msg('登录成功');
								} else {
									layer.msg('用户名或密码错误');
								}
							},
							error: function() {
								layer.msg('登录异常');
							}
						});
					} else {
						layer.msg('验证码输入错误');
						document.getElementById("yzm").value = '';
						draw(show_num);
					}
				}

			}

			function draw(show_num) {
				var canvas_width = document.getElementById('yzmc').clientWidth;
				var canvas_height = document.getElementById('yzmc').clientHeight;
				var canvas = document.getElementById("yzmc"); //获取到canvas的对象
				var context = canvas.getContext("2d"); //获取到canvas画图的环境，演员表演的舞台
				canvas.width = canvas_width;
				canvas.height = canvas_height;
				var sCode =
					"A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m";
				var aCode = sCode.split(",");
				var aLength = aCode.length; //获取到数组的长度

				for (var i = 0; i <= 3; i++) {
					var j = Math.floor(Math.random() * aLength); //获取到随机的索引值
					var deg = Math.random() * 30 * Math.PI / 180; //产生0~30之间的随机弧度
					var txt = aCode[j]; //得到随机的一个内容
					show_num[i] = txt;
					var x = 10 + i * 20; //文字在canvas上的x坐标
					var y = 20 + Math.random() * 8; //文字在canvas上的y坐标
					context.font = "bold 23px 微软雅黑";
					context.translate(x, y);
					context.rotate(deg);
					context.fillStyle = randomColor();
					context.fillText(txt, 0, 0);
					context.rotate(-deg);
					context.translate(-x, -y);
				}
				for (var i = 0; i <= 5; i++) { //验证码上显示线条
					context.strokeStyle = randomColor();
					context.beginPath();
					context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
					context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
					context.stroke();
				}
				for (var i = 0; i <= 30; i++) { //验证码上显示小点
					context.strokeStyle = randomColor();
					context.beginPath();
					var x = Math.random() * canvas_width;
					var y = Math.random() * canvas_height;
					context.moveTo(x, y);
					context.lineTo(x + 1, y + 1);
					context.stroke();
				}
			}

			function randomColor() { //得到随机的颜色值
				var r = Math.floor(Math.random() * 256);
				var g = Math.floor(Math.random() * 256);
				var b = Math.floor(Math.random() * 256);
				return "rgb(" + r + "," + g + "," + b + ")";
			}
		</script>

	</body>
</html>
